<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MediaStream</title>

    <style type="text/css">

        .grayscale {
            filter: grayscale(100%);
        }

        /* 定义模糊特效 */
        .blur {
            filter: blur(5px);
        }

        /* 定义对比度调整特效 */
        .contrast {
            filter: contrast(200%);
        }

        /* 定义亮度调整特效 */
        .brightness {
            filter: brightness(150%);
        }

        /* 定义色相旋转特效 */
        .hue-rotate {
            filter: hue-rotate(90deg);
        }

        /* 定义反色特效 */
        .invert {
            filter: invert(100%);
        }

        /* 定义饱和度调整特效 */
        .saturate {
            filter: saturate(200%);
        }

        /* 定义阴影特效 */
        .shadow {
            filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
        }


    </style>
</head>
<body>

<div>
    <button id="snapshot">Take Snapshot</button>
    <button id="downloadButton">Download Picture</button>
</div>
<div>
    <canvas id="picture"></canvas>
</div>

<div>
    <select id="filter">
        <option value="none">None</option>
        <option value="grayscale">grayscale</option>
        <option value="blur">blur</option>
        <option value="contrast">contrast</option>
        <option value="brightness">brightness</option>
        <option value="rotate">rotate</option>
        <option value="shadow">brightness</option>
        <option value="invert">invert</option>
        <option value="saturate">saturate</option>

    </select>
</div>

<div>
    <video id="player" autoplay playsinline controls style="width:300;height: 300;"></video>
</div>


</body>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>


<script>

    'use strict'

    //获取标签

    var videoplay = document.querySelector("video#player")

    var filterSelect = document.querySelector("select#filter")

    var btnSnapshot = document.querySelector("button#snapshot")

    var canvas = document.querySelector("canvas#picture")
    var downloadButton = document.querySelector("button#downloadButton")
    canvas.width = 320;
    canvas.height = 320;

    //抓取图片
    btnSnapshot.onclick = () => {
        //设置滤镜
        canvas.className = filterSelect.value;//显示有效，下载无效

        //canvas.getContext('2d').filter = 'grayscale(100%)'; //显示有效，下载有效

        //抓图并显示到canvas中
        canvas.getContext('2d').drawImage(videoplay,
            0, 0,
            canvas.width,
            canvas.height);
    }


    //下载canvas图片


    // 创建一个下载链接
    downloadButton.onclick = () => {

        // 将处理后的图像数据转换为 URL
        var dataURL = canvas.toDataURL();
        var link = document.createElement('a');
        link.download = 'filtered-image.png';
        link.href = dataURL;
        link.click();
    }


    //视频约束
    var constraints = {
        video: {
            width: {ideal: 320},
            height: {ideal: 320},
            frameRate: 15,
            facingMode: "enviroment"
        },
        audio: {
            noiseSuppression: true,
            echoCancellation: true
        }
    }


    if (!navigator.mediaDevices ||
        !navigator.mediaDevices.getUserMedia) {
        console.log('getUserMedia is not supported!');
    } else {
        navigator.mediaDevices.getUserMedia(constraints)
            .then((stream) => {
                //stream中包含了视频轨和音频轨
                videoplay.srcObject = stream

            })
            .catch((error) => {

                console.log('getUserMedia error:', error)
            });
    }

    filterSelect.onchange = () => {
        videoplay.className = filterSelect.value
    }


</script>
</html>
